import React, { useRef } from 'react'
import { Form, Row, Col, Input, Space, Button } from 'antd'
import style from './Index.module.less'

const { Item } = Form
const layout = {
  labelCol: { flex: '140px' }
}

function formatCondition (form) {
  const condition = []
  if (form.title !== undefined && form.title !== '') {
    condition.push({ k: 'title', o: 'like', v: `%${form.title}%` })
  }
  if (form.summary) {
    condition.push({ k: 'summary', o: 'like', v: `%${form.summary}%` })
  }
  return condition
}

function Main ({ onChange = () => {} }) {
  const formRef = useRef(null)
  return (
    <div>
      <Form name='arbitrator-manage-search' ref={formRef} {...layout} initialValues={{ retire: '', foreign_case_in: '', professional_tag: '全部' }} onFinish={d => onChange(formatCondition(d))} onReset={() => formRef.current.submit()}>
        <Row gutter={24}>
          <Col span={8}>
            <Item label='标题' name='title'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='简介' name='summary'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item className={style['right-line']}>
              <Space size='middle'>
                <Button type='primary' ghost htmlType='submit'>搜索</Button>
                <Button htmlType='reset'>重置</Button>
              </Space>
            </Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default Main
